<template>
	<view>
		<!-- 头部 -->
		<view class="header">
			<van-steps :steps="steps" :active="active" inactive-color="#979797" custom-class="van-steps" active-color="background:#00C5C1" desc-class="van-steps-desc"></van-steps>
		</view>

		<!-- 服务特色 -->
		<view class="service">
			<view class="service-features">
				<text class="features-1">服务特色</text>
				<text class="features-2">最多选择10个，前3个显示在个人/店铺的页面标签展示给顾客；</text>
			</view>

			<view class="service-text">
				<text>已选</text>
				<view class="service-movable">
					<view v-for="(item, index) in newTagView" :key="index" class="s123">
						<van-button
							round
							type="info"
							size="mini"
							custom-class="service-btn"
							custom-style="background:#E7FFFE;color:#00C5C1;border:1px solid #E7FFFE;font-size:20rpx"
						>
							{{ item.name }}
							<text style="padding:0 5rpx">X</text>
						</van-button>
					</view>
				</view>
				<block></block>
			</view>

			<view class="van-row">
				<view v-for="(item, index) in tagview" :key="index">
					<van-button
						type="default"
						custom-class="van-btn"
						size="small"
						@click="onClickBtn"
						:data-id="item.id"
						:data-name="item.name"
						:custom-style="item.id == tagviewid ? 'background:#E7FFFE;border:1px solid #00C5C1;color:#00C5C1' : ''"
					>
						{{ item.name }}
					</van-button>
				</view>
				<van-button custom-class="van-btn" size="small" icon="plus">自定义</van-button>
			</view>
		</view>

		<!--  -->
		<view class="service-line"></view>

		<!-- 其他 -->
		<view>
			<view class="van-row">
				<view v-for="(item, index) in tagview1" :key="index">
					<van-button
						type="default"
						custom-class="van-btn"
						size="small"
						@click="onClickBtn"
						:data-id="item.id"
						:data-name="item.name"
						:custom-style="item.id == tagviewid ? 'background:#E7FFFE;border:1px solid #00C5C1;color:#00C5C1' : ''"
					>
						{{ item.name }}
					</van-button>
				</view>
				<van-button custom-class="van-btn" size="small" icon="plus">自定义</van-button>
			</view>
		</view>

		<!-- 按钮 -->
		<view class="service-buttonbox">
			<view class="service-button">
				<button @click-step @click="onPrevious" class="service-button-1"><text>上一步</text></button>
				<button class="service-button-2" @click-step @click="onNext"><text>完成</text></button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			steps: [
				{
					desc: '品牌介绍'
				},
				{
					desc: '服务特色'
				},
				{
					desc: '环境设施'
				}
			],

			active: 2,

			tagview: [
				{
					name: '储物柜',
					id: 1
				},
				{
					name: '充电宝',
					id: 2
				},
				{
					name: 'VIP专区',
					id: 3
				},
				{
					name: '沙发座',
					id: 4
				},
				{
					name: '免费WI-FI',
					id: 5
				},
				{
					name: '可看电视',
					id: 6
				},
				{
					name: '摄影专区',
					id: 7
				},
				{
					name: '头皮专区',
					id: 8
				}
			],
			tagviewid: 0,
			newTagView: [],
			tagview1: [
				{
					name: '吸烟区',
					id: 1
				},
				{
					name: '有停车位',
					id: 2
				},
				{
					name: '刷卡支付',
					id: 3
				},{
					name:'按摩座椅',
					id:4
				},{
					name:"电梯",
					id:5
				},{
					name:'空调',
					id:6
				},{
					name:'水质净化',
					id:6
				},{
					name:'空气净化',
					id:7
				}
			]
		};
	},

	methods: {
		onClickBtn(e) {
			console.log('点击了按钮', e);
			console.log(e.target.dataset);
			let tagitem = this.newTagView;
			let id = e.currentTarget.dataset.id;

			// 添加到tagitem中
			tagitem.push(e.target.dataset);
			console.log('newTagView>>', this.newTagView);
		},

		// 上一步
		onPrevious() {
			uni.navigateBack({
				url: '../packageA/store_service/store_service'
			});
		},

		// 完成
		onNext() {
			//   uni.navigateTo({
			//     url: 'url'
			//   });
			//
			console.log('已经完成》》》》》》》》》》》》');
		}
	}
};
</script>
<style>
@import './store_decorate.css';
</style>
